<div class="relative flex flex-col w-full max @container/details">
  <%= link_to helpers.svg('heroicons/outline/x-mark', class: "size-6"), helpers.avo.media_library_index_path,
    class: "absolute z-10 inset-auto right-0 top-0 mt-2 mr-2 block bg-white p-1 rounded-lg text-slate-600 hover:text-slate-900",
    title: t('avo.close'),
    data: {
      tippy: :tooltip,
    } %>
  <div class="flex flex-1 flex-row w-full">
    <div class="flex flex-col justify-center w-1/2 @3xl/details:w-2/3 p-4 gap-2">
      <% if @blob.image? %>
        <%= image_tag helpers.main_app.url_for(@blob), class: "max-w-full rounded-lg max-h-xl", loading: :lazy %>
      <% elsif @blob.audio? %>
        <%= audio_tag(helpers.main_app.url_for(@blob), controls: true, preload: false, class: 'w-full') %>
      <% elsif @blob.video? %>
        <%= video_tag(helpers.main_app.url_for(@blob), controls: true, preload: false, class: 'w-full') %>
      <% else %>
        <div class="relative h-full flex flex-col justify-center items-center w-full bg-slate-100">
          <%= helpers.svg "heroicons/outline/document-text", class: 'h-10 text-gray-600 mb-2' %>
        </div>
      <% end %>
      <div class="flex justify-center w-full text-sm gap-4">
        <%= link_to "Download", helpers.main_app.url_for(@blob), download: true %>
        <%= link_to "Copy URL to clipboard", helpers.main_app.url_for(@blob), data: {controller: "copy-to-clipboard", text: helpers.main_app.url_for(@blob), action: "click->copy-to-clipboard#copy"} %>
        <%= link_to "Delete", helpers.avo.media_library_path(@blob), class: "text-red-500", data: {turbo_confirm: "Are you sure you want to destroy this attachment?", turbo_method: :delete} %>
      </div>
    </div>
    <div class="flex flex-col w-1/2 @3xl/details:w-1/3 border-l">
      <%= render partial: "avo/media_library/information", locals: {blob: @blob} %>
      <%= render partial: "avo/media_library/form", locals: {blob: @blob} %>
    </div>
  </div>
</div>
